//------ SASS Useful Mixins ---------------------------------------------

// by Ryan Burgess
// https://github.com/ryanburgess/SASS-Useful-Mixins
// MIT © Ryan Burgess

// -----------------------------------------------------------------------

// Retina Images

// ----------------------------------------------------------------------

// example: @include retina("logo2x.png", 100, 50);

/* stylelint-disable media-feature-name-no-unknown */

@mixin retina($image, $width, $height) {
  @media (min--moz-device-pixel-ratio: 1.3),
    (-o-min-device-pixel-ratio: 2.6/2),
    (-webkit-min-device-pixel-ratio: 1.3),
    (min-device-pixel-ratio: 1.3),
    (min-resolution: 1.3dppx) {
    background-image: url('#{$image}');
    background-size: $width + px $height + px;
    //background-size: $width / 10 + rem $height / 10 + rem; // Use this if you've set HTML font size value to 62.5%
    background-size: $width / 16 + rem $height / 16 + rem;
  }
}

/* stylelint-enable media-feature-name-no-unknown */
